<template>
  <div class="healthshop">
    <!-- 搜索框 -->
    <van-search
      v-model="value"
      show-action
      placeholder="搜索你需要的商品"
      shape="round"
      @search="onSearch"
      class="search"
    >
      <template #action>
        <div @click="onSearch" class="dingdan">
          <img src="https://z3.ax1x.com/2021/07/20/WYWXRA.png" alt="" />
          订单
        </div>
      </template>
    </van-search>
    <!-- 轮播图 -->
    <div class="shopwrap">
      <van-pull-refresh
        v-model="state.loading"
        @refresh="onRefresh"
        class="shopinnerwrap"
      >
        <van-swipe
          class="my-swipe"
          :autoplay="3000"
          indicator-color="white"
          @click="handleclick"
        >
          <van-swipe-item>
            <img src="https://z3.ax1x.com/2021/07/18/W3eciF.png" alt="" />
          </van-swipe-item>
          <van-swipe-item>
            <img
              src="https://img13.360buyimg.com/babel/s800x468_jfs/t1/163193/37/18472/58048/607689c6E933e1bbb/c2bb2b532a1f6990.jpg!cc_800x468"
              alt=""
            />
          </van-swipe-item>
          <van-swipe-item>
            <img
              src="https://img20.360buyimg.com/babel/s800x468_jfs/t1/189001/29/11437/117577/60e3ff9aE7df1063b/150f02c03302ee04.jpg!cc_800x468"
              alt=""
            />
          </van-swipe-item>
          <van-swipe-item>
            <img
              src="https://img10.360buyimg.com/babel/s800x468_jfs/t1/173982/37/16114/76510/60d15910E2acc1900/3a16b2b11b98794c.png!cc_800x468"
              alt=""
            />
          </van-swipe-item>
        </van-swipe>
        <!-- 导航栏 -->
        <div class="pad">
          <div class="navitem">
            <div class="pwrap">
              <img
                src="https://z3.ax1x.com/2021/07/18/W3uVaV.png"
                alt=""
                @click="handleclick1"
              />
              <p>营养保健</p>
            </div>
            <div class="pwrap">
              <img
                src="https://z3.ax1x.com/2021/07/18/W3ulrR.png"
                alt=""
                @click="handleclick1"
              />
              <p>男性健康</p>
            </div>
            <div class="pwrap">
              <img
                src="https://z3.ax1x.com/2021/07/18/W3nWHx.png"
                alt=""
                @click="handleclick1"
              />
              <p>签到0元领</p>
            </div>
            <div class="pwrap">
              <img
                src="https://z3.ax1x.com/2021/07/18/W3noCD.png"
                alt=""
                @click="handleclick1"
              />
              <p>心脑血管</p>
            </div>
            <div class="pwrap five">
              <img
                src="https://z3.ax1x.com/2021/07/18/W3njVP.png"
                alt=""
                @click="handleclick1"
              />
              <p>医疗器械</p>
            </div>
            <div class="pwrap">
              <img
                src="https://z3.ax1x.com/2021/07/18/W3up8g.png"
                alt=""
                @click="handleclick1"
              />
              <p>胃肠用药</p>
            </div>
            <div class="pwrap">
              <img
                src="https://z3.ax1x.com/2021/07/18/W3ukbq.png"
                alt=""
                @click="handleclick1"
              />
              <p>呼吸科</p>
            </div>
            <div class="pwrap">
              <img
                src="https://z3.ax1x.com/2021/07/18/W3uVaV.png"
                alt=""
                @click="handleclick1"
              />
              <p>皮肤科</p>
            </div>
            <div class="pwrap">
              <img
                src="https://z3.ax1x.com/2021/07/18/W3uu24.png"
                alt=""
                @click="handleclick1"
              />
              <p>风湿骨科</p>
            </div>
            <div class="pwrap five">
              <img
                src="https://z3.ax1x.com/2021/07/18/W3ulrR.png"
                alt=""
                @click="handleclick1"
              />
              <p>体检疫苗</p>
            </div>
          </div>
          <!-- 限时特价 -->
          <div class="list bargain">
            <h3>限时特价</h3>
            <div class="bargain-wrap">
              <div class="wrapitem">
                <div
                  class="bargain-item"
                  v-for="item in healshopbarginlist"
                  :key="item._id"
                  @click="gotodetail"
                >
                  <img :src="item.imgurl" alt="" />
                  <p>{{ item.title }}</p>
                  <p>
                    {{ item.newpriceint }}.<span>{{ item.newpricefloat }}</span
                    ><i>特价</i>
                  </p>
                </div>
              </div>
            </div>
          </div>
          <!-- 限时特价 -->
          <div class="list activity">
            <h3>精选活动</h3>
            <van-grid :column-num="2" :gutter="10" class="acinglist">
              <van-grid-item class="acimg" @click="handleclick2">
                <div class="acing-text">
                  <h4>品牌好药</h4>
                  <p>低价购药</p>
                  <i>GO></i>
                </div>
              </van-grid-item>
              <van-grid-item class="acimg nomar" @click="handleclick2">
                <div class="acing-text">
                  <h4>营养保健馆</h4>
                  <p>时令滋补</p>
                  <i>GO></i>
                </div>
              </van-grid-item>
              <van-grid-item class="acimg" @click="handleclick2">
                <div class="acing-text">
                  <h4>惠买药</h4>
                  <p>合作推荐</p>
                  <i>GO></i>
                </div>
              </van-grid-item>
              <van-grid-item class="acimg nomar" @click="handleclick2">
                <div class="acing-text">
                  <h4>特卖专区</h4>
                  <p>免费咨询</p>
                  <i>GO></i>
                </div>
              </van-grid-item>
            </van-grid>
          </div>
          <!-- 男科好药推荐 -->
          <div class="list recommand">
            <h3>男科好药推荐</h3>
            <van-grid :column-num="3" :gutter="10" class="acinglist">
              <van-grid-item
                icon="https://z3.ax1x.com/2021/07/18/W3BSiD.png"
                class="andrology acimg"
                @click="handleclick3"
              >
              </van-grid-item>
              <van-grid-item
                icon="https://z3.ax1x.com/2021/07/18/W3BEeP.png"
                class="andrology acimg"
                @click="handleclick3"
              >
              </van-grid-item>
              <van-grid-item
                icon="https://z3.ax1x.com/2021/07/18/W3B8e0.png"
                class="andrology acimg"
                @click="handleclick3"
              >
              </van-grid-item>
            </van-grid>
          </div>
          <!-- 优质店铺 -->
          <div class="list bottom">
            <h3>优质店铺</h3>
            <div class="store">
              <span class="left">
                <img src="https://z3.ax1x.com/2021/07/18/W3r9KA.png" alt="" />
              </span>
              <div class="center">
                <h4>康爱多大药房</h4>
                <p>广州市白云区云景路4号102铺之二</p>
              </div>
              <div class="right" @click="enter">进店 ></div>
            </div>
            <div class="bargain-wrap">
              <div
                class="bargain-item"
                v-for="item in healshopstorelist"
                :key="item._id"
                @click="gotodetail2"
              >
                <img :src="item.imgurl" alt="" />
                <p>{{ item.title }}</p>
                <p>
                  {{ item.newpriceint }}.<span>{{ item.newpricefloat }}</span
                  ><i>特价</i>
                </p>
              </div>
            </div>
          </div>
          <p class="nomore" v-if="state.flag === true">
            <van-loading size="24px">我是有底线的</van-loading>
          </p>
        </div>
      </van-pull-refresh>
    </div>
  </div>
</template>
<script>
import { ref, reactive, computed, onMounted, watch, nextTick } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { Toast } from "vant";
import BetterScroll from "better-scroll";
export default {
  setup() {
    const store = useStore();
    const router = useRouter();
    const value = ref("");
    const state = reactive({
      loading: false,
      flag: false,
    });
    const healshopbarginlist = computed(() => store.state.healshopbarginlist);
    const healshopstorelist = computed(() => store.state.healshopstorelist);
    //监控限时特价滚动
    watch(healshopbarginlist, async () => {
      await nextTick();
      new BetterScroll(".bargain-wrap", {
        scrollX: true,
        scrollY: false,
        click: true,
      });
    });

    //获取限时特价数据
    const getbargin = () => {
      store.dispatch("changehealshopAsync");
    };
    //限时特价跳转详情页
    const gotodetail = () => {
      router.push("/detail/60f4c97c2a13f5d641050ca4");
    };
    //监控优质商店滚动
    watch(healshopstorelist, async () => {
      await nextTick();
      const bs = new BetterScroll(".shopwrap", {
        scrollX: false,
        scrollY: true,
        click: true,
        pullUpLoad: true,
      });
      bs.on("pullingUp", () => {
        // console.log("监听到了拉到底了");
        state.flag = true;
      });
    });
    //获取优质商品数据
    const getstore = () => {
      store.dispatch("changehealshopstoreAsync");
    };
    //优质商店跳转
    const gotodetail2 = () => {
      router.push("/detail/60f4c9642a13f5d641050c9a");
    };
    //轮播图点击跳转
    const handleclick = () => {
      Toast("功能还不支持");
    };
    //导航栏跳转
    const handleclick1 = () => {
      Toast("功能还没上线");
    };
    //品牌好药跳转
    const handleclick2 = () => {
      router.push("/athome");
    };
    //男科好药推荐跳转
    const handleclick3 = () => {
      Toast("等待更新");
    };
    //订单栏跳转
    const onSearch = () => {
      Toast("订单功能暂未开放");
    };
    //上拉刷新
    const onRefresh = () => {
      setTimeout(() => {
        Toast("刷新成功");
        state.loading = false;
      }, 1000);
    };
    const enter = () => {
      Toast("跳转到店铺详情页面");
    };
    onMounted(() => {
      getbargin();
      getstore();
    });
    return {
      value,
      state,
      onRefresh,
      healshopbarginlist,
      healshopstorelist,
      handleclick,
      handleclick1,
      gotodetail,
      gotodetail2,
      handleclick2,
      handleclick3,
      onSearch,
      enter,
    };
  },
};
</script>
<style lang="less">
.healthshop {
  width: 100%;
  font-size: 18px;
  background: #fff;
  //搜索框
  .search {
    width: 100%;
  }
  .van-search--show-action {
    width: 100%;
    padding: 15px 17.5px 15px 17.5px;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 9;
    .van-search__action {
      padding-right: 0;
    }
    .dingdan {
      display: flex;
      flex-direction: column;
      height: 34px;
      justify-content: center;
      align-items: center;
      font-size: 10px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #999999;
      line-height: 18px;
      transform: translateY(2px);
      img {
        width: 20px;
        height: 20px;
      }
    }
  }
  .pad {
    padding: 0 17.5px;
  }
  .shopwrap {
    position: fixed;
    top: 63px;
    left: 0;
    right: 0;
    bottom: 78px;
    //轮播图
    .my-swipe .van-swipe-item {
      color: #fff;
      font-size: 20px;
      height: 122px;
      line-height: 150px;
      text-align: center;
      // margin-bottom: 21px;
      border-radius: 10px;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }
    //导航栏
    .navitem {
      display: flex;
      height: 197px;
      flex-wrap: wrap;
      margin: 21px 0 16px 0;
      border-bottom: 10px solid #cecece;
      .pwrap {
        width: 48px;
        height: 48px;
        font-size: 12px;
        margin-right: 25px;
        color: #666666;
        text-align: center;
        p {
          font-size: 12px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #333333;
          line-height: 18px;
          width: 59px;
          transform: translateX(-5px);
        }
        img {
          width: 46.5px;
          height: 46.5px;
          margin-bottom: 10px;
        }
      }
      .five {
        margin-right: 0;
      }
    }
    //限时特价
    .bargain {
      .bargain-wrap {
        width: 100%;
        font-size: 13px;
        font-family: PingFang SC;
        color: #333333;
        line-height: 18px;
        height: 190px;
        overflow: hidden;
        .wrapitem {
          display: inline-flex;
          align-items: center;
          .bargain-item {
            width: 108px;
            height: 189.5px;
            margin-right: 10.5px;
            img {
              width: 108px;
              margin-bottom: 22px;
            }
            p {
              &:first-of-type {
                margin-bottom: 3px;
                width: 108px;
                height: 36px;
                overflow: hidden;
                text-overflow: ellipsis;
                font-size: 500;
              }
              &:last-of-type {
                display: flex;
                font-size: 14px;
                font-weight: 900;
                color: #ff3100;
                span {
                  font-size: 9px;
                  line-height: 20px;
                }
                i {
                  width: 34px;
                  height: 15px;
                  background: #fff2ec;
                  border-radius: 7.5px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  padding: 2px 4px;
                  font-size: 9px;
                  color: #ff3200;
                  line-height: 18px;
                  margin-left: 4px;
                  font-weight: normal;
                }
              }
            }
          }
        }

        // .last {
        //   margin-right: 0;
        // }
      }
    }
    //精选活动
    .activity {
      h3 {
        margin-top: 12.5px;
      }
      .acinglist {
        padding: 0 !important;
        margin-bottom: 7.5px;
        .van-hairline {
          padding: 0 !important;
        }
        .acimg {
          width: 171px !important;
          height: 88px;
          &:first-of-type {
            .van-grid-item__content--center {
              background: url(https://z3.ax1x.com/2021/07/18/W3wHDP.png);
              background-size: 100% 100%;
            }
          }
          &:nth-of-type(2) {
            .van-grid-item__content--center {
              background: url(https://z3.ax1x.com/2021/07/18/W30KDx.png);
              background-size: 100% 100%;
            }
            .acing-text {
              i {
                background: lightblue;
              }
            }
          }
          &:nth-of-type(3) {
            .van-grid-item__content--center {
              background: url(https://z3.ax1x.com/2021/07/18/W30txA.png);
              background-size: 100% 100%;
            }
            .acing-text {
              i {
                background: lightpink;
              }
            }
          }
          &:last-of-type {
            .van-grid-item__content--center {
              background: url(https://z3.ax1x.com/2021/07/18/W30art.png);
              background-size: 100% 100%;
            }
            .acing-text {
              i {
                background: lightslategray;
              }
            }
          }
          .acing-text {
            transform: translateX(-40px) translateY(-5px);
            h4 {
              font-size: 15px;
              margin-bottom: 3px;
            }
            p {
              font-size: 12px;
              color: #ccc;
              margin-bottom: 5px;
            }
            i {
              font-weight: normal;
              font-size: 12px;
              color: white;
              padding: 0px 5px;
              text-align: center;
              background: limegreen;
              height: 18px;
              border-radius: 9px;
            }
          }
        }
        .nomar {
          padding: 0 !important;
        }
      }
    }
    //男科好药推荐
    .recommand {
      padding-bottom: 15px;
      h3 {
        margin-top: 17px;
      }
      .acinglist {
        padding: 0 !important;
        margin-bottom: 7px;
        .van-hairline {
          padding: 0 !important;
        }
        .acimg {
          width: 171px !important;
          height: 88px;
          padding-right: 4px !important;
          img {
            width: 100%;
            height: 100%;
          }
          .van-hairline {
            width: 100%;
            height: 100%;
          }
        }
        .nomar {
          padding: 0 !important;
        }
      }
    }
    //所有列表通用
    .list {
      h3 {
        margin-bottom: 20px;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #333333;
        line-height: 18px;
      }
      border-bottom: 10px solid #cecece;
    }
    //男性科
    .andrology {
      width: 110px;
      height: 110px;
    }
    //优质店铺
    .bottom {
      // margin-bottom: 66px;
      h3 {
        margin-top: 16px;
      }
      .store {
        display: flex;
        font-size: 14px;
        height: 48px;
        .left {
          width: 32px;
          height: 22px;
          margin-right: 15px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .center {
          flex: 1;
          font-family: PingFang SC;
          transform: translateY(-7px);
          h4 {
            font-size: 13.5px;
            line-height: 18px;
            color: #333333;
            font-weight: bold;
          }
          p {
            font-size: 12px;
            color: #999999;
            line-height: 18px;
          }
        }
        .right {
          width: 48px;
          height: 25px;
          border: 1px solid #ccc;
          border-radius: 12.5px;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 12px;
          font-family: PingFang SC;
          color: #999999;
          line-height: 18px;
        }
      }
      .bargain-wrap {
        display: flex;
        align-items: center;
        font-size: 13px;
        font-family: PingFang SC;
        color: #333333;
        line-height: 18px;
        margin-bottom: 15px;
        .bargain-item {
          width: 108px;
          height: 189.5px;
          margin-right: 10.5px;
          img {
            width: 108px;
            margin-bottom: 22px;
          }
          p {
            &:first-of-type {
              margin-bottom: 3px;
              width: 108px;
              height: 36px;
              overflow: hidden;
              text-overflow: ellipsis;
              font-weight: 500;
            }
            &:last-of-type {
              display: flex;
              font-size: 14px;
              font-weight: 900;
              color: #ff3100;
              span {
                font-size: 9px;
                line-height: 20px;
              }
              i {
                width: 34px;
                height: 15px;
                background: #fff2ec;
                border-radius: 7.5px;
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 2px 4px;
                font-size: 9px;
                color: #ff3200;
                line-height: 18px;
                margin-left: 4px;
                font-weight: normal;
              }
            }
          }
        }
        .last {
          margin-right: 0;
        }
      }
    }
    .nomore {
      margin-top: 15px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
